<template>
    <div  style="height: 300px; width: 600px;">
      <div class="tagcloud">
        <!-- 动态生成词云标签 -->
        <a
          v-for="(item, index) in renderedTags"
          :key="index"
          :style="{
          width: item.size + 'px',
          height: item.size + 'px',
          borderColor: item.color,
          boxShadow: 'inset 0 0 20px ' + item.color,
          fontSize: item.fontSize + 'px'
        }"
          href="#"
          :title="item.name"
        >{{item.name }}</a>
      </div>
    </div>
</template>
<script>
import { tagcloud } from './tagCloud.js'
export default {
    name: "TagCloudComponent",
    props: {
        width:{
            type: Number,
            default: () => {
                return 0
            }
        },
        data: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    //数据，宽，高，半径，半径一般为宽高的一半。
    data() {
        return {
        };
    },
    computed: {
      renderedTags() {
        const minSize = 50;
        const maxSize = 100;

        // 取出 count 最大的前 5 个
        const topData = this.data
          .slice()
          .sort((a, b) => b.count - a.count)
          .slice(0, 8);

        if (!Array.isArray(topData) || topData.length === 0) {
          return [];
        }

        const maxCount = Math.max(...topData.map(item => item.count), 1);
        const maxLength = Math.max(...topData.map(item => item.name.length), 1);

        return topData.map(item => {
          const size = Math.max(minSize, (item.count / maxCount) * maxSize);

          // 归一化处理：将 count 和 name.length 映射到 [0, 1] 区间
          const normalizedCount = item.count / maxCount;        // count 越大值越大
          const normalizedLength = item.name.length / maxLength; // 字数越多值越大

          // 加权公式（你可以调整 weightCount 来控制偏重哪一方）
          const weightCount = 0.6; // count 权重占比（0 ~ 1）
          const combinedScore = weightCount * normalizedCount - (1 - weightCount) * normalizedLength;

          // 将综合得分映射到 font-size 范围 [10px, 20px]
          const fontSize = Math.max(10, Math.min(20, 10 + 10 * combinedScore));

          const randomColor = () => {
            const hue = Math.floor(Math.random() * 360); // 色相 0~360
            const saturation = 70 + Math.floor(Math.random() * 30); // 饱和度 70% ~ 100%
            const lightness = 50 + Math.floor(Math.random() * 10); // 明亮程度 50% ~ 60%

            return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
          };

          return {
            name: item.name,
            count: item.count,
            size: size,
            fontSize: fontSize,
            color: randomColor()
          };
        });
      }
    },
    created() {
    },
    mounted() {
      // 词云
      tagcloud({
        selector: ".tagcloud",  //元素选择器
        fontsize: 6,       //基本字体大小, 单位px
        radius: 80,         //滚动半径, 单位px 页面宽度和高度的五分之一
        mspeed: "normal",   //滚动最大速度, 取值: slow, normal(默认), fast
        ispeed: "slow",   //滚动初速度, 取值: slow, normal(默认), fast
        direction: 0,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
        keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
      });
    },
    methods: {

    }
};
</script>


<style lang="less" scoped>
    .tagcloud {
      width: 100%;
      height: 90% !important;
      overflow: hidden;
      position: relative;
    }

    .tagcloud a {
      border-radius: 50%;
      color: #3FA598;
      font-weight: bold;
      text-decoration: none;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      // 单行显示，超出部分隐藏 + 省略号
      white-space: nowrap;        // 禁止换行
      overflow: hidden;           // 超出隐藏
      text-overflow: ellipsis;    // 显示省略号 ...
      max-width: 100%;            // 保证容器宽度生效
    }

    .b01{
      width: 60px;
      height: 60px;
    }
    .b02{
      width: 80px;
      height: 80px;
    }
    .b03{
      width: 70px;
      height: 70px;

    }
    .b04{
      width: 90px;
      height: 90px;

    }
    .co01{  border: 2px solid rgba(5,118,254,1);   box-shadow: inset 0 0 20px rgba(5,118,254,1);}
    .co02{border: 2px solid rgba(238,255,65,1);   box-shadow: inset 0 0 20px rgba(238,255,65,1);}
    .co03{border: 2px solid rgba(26,121,181,1);   box-shadow: inset 0 0 20px rgba(26,121,181,1);}
    .co04{border: 2px solid rgba(1,187,181,1);   box-shadow: inset 0 0 20px rgba(1,187,181,1);}
    .co05{border: 2px solid rgba(255,138,0,1);   box-shadow: inset 0 0 20px rgba(255,138,0,1);}


</style>